﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <title>创建请求</title>
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="~/content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/content/wechat/basic.css" rel="stylesheet" />
    <link href="~/content/wechat/CreateApplication.css" rel="stylesheet" />

</head>
<body>
    <header class="style-bg-green">
        <i class="fa fa-question-circle-o col-xs-10"> 创建请求</i>
    </header>
    <form name="reportitem" id="formid" method="post" enctype="multipart/form-data" action="">
        <div class="container">
            <div class="tag style-bg-green"></div>
            <div class="clearfix">
                <label for="tel" class="col-xs-4">联系电话<span class="mul style-green">*</span></label>
                <input type="text" name="Mobile" id="Mobile" placeholder="请输入联系电话" class="col-xs-8" />
                <hr class="whole style-gray col-xs-10" />
            </div>

            <div class="clearfix">
                <label for="email" class="col-xs-4">E-mail</label>
                <input type="text" name="Email" id="Email" placeholder="请输入E-mail" class="col-xs-8" />
                <hr class="whole style-gray col-xs-10" />
            </div>
            <div class="activityhtml"></div>
            <div class="clearfix">
                <label for="Priority" class="col-xs-4">等级<span class="mul style-green">*</span></label>
                <select id="Priority" name="Priority" class="col-xs-8">
                    <option value="" hidden>请选择等级</option>
                    <option value="1">critical</option>
                    <option value="2">high</option>
                    <option value="3">medium</option>
                    <option value="4">Low</option>
                </select>
                <i class="fa fa-caret-down style-green"></i>
                <hr class="whole style-gray col-xs-10" />
            </div>
            <div class="clearfix add-img">
                <label for="" class="col-xs-4">系统截图</label>
                <input type="file" name="uploadface" accept="image/*" id="file1" class="col-xs-2 input-img opa" onchange="compress(this,'1')" />
                <i id="iImg1" class="fa fa-plus-square-o col-xs-2 add style-gray"></i>
                @*yangyao*@
                <div class="progressBar" id="progressBar1" style="margin:5% 0 0 36%;"><div id="bar1"></div></div>
                @*yangyao--*@

                <input type="file" name="uploadface" accept="image/*" id="file2" class="col-xs-2 input-img opa" onchange="compress(this,'2')" />
                <i id="iImg2" class="fa fa-plus-square-o col-xs-2 add style-gray"></i>
                @*yangyao*@
                <div class="progressBar" id="progressBar2" style="margin: 5% 0 0 57%;"><div id="bar2"></div></div>
                @*yangyao--*@
                <input type="file" name="uploadface" accept="image/*" id="file3" class="col-xs-2 input-img opa" onchange="compress(this,'3')" />
                <i id="iImg3" class="fa fa-plus-square-o col-xs-2 add style-gray"></i>
                @*yangyao*@
                <div class="progressBar" id="progressBar3" style="margin: 5% 0 0 78%;"><div id="bar3"></div></div>
                @*yangyao--*@
                <hr class="whole style-gray col-xs-10" />
            </div>

            <div class="clearfix">
                <label for="details" class="col-xs-4">问题描述<span class="mul style-green">*</span></label>
                <textarea id="IssueDescription" name="IssueDescription" cols="30" rows="5" placeholder="请输入问题描述" class="col-xs-8"></textarea>
                <hr class="whole style-gray col-xs-10" />
            </div>
        </div>
    </form>
    <footer class="col-xs-12">
        <button class="sub col-xs-5 style-bg-blue" type="submit" id="submit" style="margin-left: 4%" onclick="Save()">提交请求</button>
        <button class="cancel col-xs-5 col-xs-offset-1 style-bg-blue" type="reset" id="cancel">取消请求</button>
    </footer>
    @*<div id="img_show"></div>*@
    <script src="~/scripts/jquery-1.8.2.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/upload.js")"></script>
    <script src="~/Scripts/compress/lrz.mobile.min.js"></script>
    <script>
        $(function () {
            var applicationID = @ViewData["ApplicationID"];
            var isMandary = "<span class=\"mul style-green\">*</span></label>";
            $.ajax({
                url: "/api/WeChat/GetInputFieldAndDataSourceInfo",
                data: { 'applicationId': applicationID,'issueTypeId': 0 },
                type: "GET",
                success: function (info) {
                    $.each(info, function (index, value) {
                        //1.文字,2:数字,3:时间,4:下拉框,5;checkbox
                        console.log("value :" + value)
                        console.log("value.IsMandary :"+value.IsMandary)
                        if (value.IsMandary != true) isMandary = "";
                        var content = "";
                        switch (value.FieldDataType) {
                            case 1:
                                content = (" <div class=\"clearfix\"><label for=" + value.EnglishName + " class=\"col-xs-4\">" + value.FieldName+ "</label>"
                                    + isMandary +
                                    "<input type=\"text\"   name=" + value.FieldID + " id= ticket_" + value.FieldID + " placeholder=" + value.FieldDescription + " class=\"col-xs-8 checkNum\" />"
                                    + "<hr class=\"whole style-gray col-xs-10\" /></div>");
                                break;
                            case 2:
                                content = (" <div class=\"clearfix\"><label for=" + value.EnglishName + " class=\"col-xs-4\">" + value.FieldName + "</label>"
                                    + isMandary +
                                    "<input type=\"text\" name=" + value.FieldID + " id=ticket_" + value.FieldID + " placeholder=" + value.FieldDescription + " class=\"col-xs-8 checkNum\" />"
                                    + "<hr class=\"whole style-gray col-xs-10\" /></div>");
                                break;
                            case 3:
                                content = (" <div class=\"clearfix\"><label for=" + value.EnglishName + " class=\"col-xs-4\">" + value.FieldName + "</label>"
                                    + isMandary +
                                    "<input type=\"text\" name=" + value.FieldID + " id=ticket_" + value.FieldID + " placeholder=" + value.FieldDescription + " class=\"col-xs-8 checkNum\" />"
                                    + "<hr class=\"whole style-gray col-xs-10\" /></div>");
                                break;
                            case 4:
                                content = ("<div class=\"clearfix\"><label for=" + value.EnglishName + " class=\"col-xs-4\">" + value.FieldName + "</label>" + isMandary +
                                    "<select id = ticket_" + value.FieldID + " name=" + value.FieldID + " class=\"col-xs-8\"><option value='" + 0 + "'>" + '请选择' + "</option></select>" +
                                    "<i class=\"fa fa-caret-down style-green\"></i><hr class=\"whole style-gray col-xs-10\" /></div>");
                                break;
                            case 5:
                                content = (
                                    " <div class=\"clearfix\"><label for=" + value.EnglishName + " class=\"col-xs-4\">" + value.FieldName + "</label>" +
                                    "<textarea id=ticket_" + value.FieldID + " name=" + value.FieldID + " rows=\"4\" class=\"col-xs-8\"></textarea>" + "<hr class=\"whole style-gray col-xs-10\" /></div>");
                                break;
                        }
                        $(".activityhtml").append(content);

                        if (value.FieldDataType == 4) {
                            if (null  != value.DataSourceList) {
                                GenerateSource(value.FieldID, value.DataSourceList);
                            }
                        }
                    });
                    loadIssueType();
                },
                error: function (info) {
                    alert("error");
                },
            });


            function loadIssueType() {

                //获取project的IssueType信息
               var IssueTypeVal = "";
                $.ajax({
                    url: "/api/Settings/GetIssueTypeInfos",
                    data: { 'ProjectID': applicationID },
                    dataType: "json",
                    success: function (info) {
                        if (info != null && info.length > 0) {
                            $.each(info, function (j, item) {

                                    if (item.IssueTypeDescription != $("#IssueType").val()) {
                                        IssueTypeVal += "<option value = " + item.ID + ">" + item.IssueTypeDescription + "</option>";
                                }
                            });
                            var IssueType = ("<div class=\"clearfix\"><label for=\"IssueType\" class=\"col-xs-4\">IssueType</label>"+
                                "<select id=\"IssueType\"  class=\"col-xs-8\">" + IssueTypeVal +"</select>"+
                                "<i class=\"fa fa-caret-down style-green\"></i><hr class=\"whole style-gray col-xs-10\" /></div>");
                            $(".activityhtml").append(IssueType);
                        }
                    }
                });
            }



        });

        function GenerateSource(id, datasource) {
            var content = "";
            $.each(datasource, function (index, value) {
                $("#ticket_" + id).append("<option  value='" + value.DataSourceValue + "'>" + value.DataSourceDescription + "</option>");
            })
        }

        function Save() {
            var input = $("#formid").serializeArray();
            var applicationID = @ViewData["ApplicationID"];
            //var errmessage = "";
            var postdata = { InputDataValue: [], IssueDescription: {}, IssueType: {}, Images: [], InputDataSource: [], Priority: {}, Email: {}, Mobile: {}, IssueType: {}, ApplicationID: {}}
            $.each(input, function (index, value) {
                var id = value.name;
                if (id == "imagesource") {//图片

                } else {
                    if ($("#trial_" + id).data("type") == "checkbox") {
                        postdata.inputData.push({ ID: id, Value: $("#trial_" + id).is(':checked') });
                    } else if ($("#ticket_" + id).data("type") == "select") {
                        if (value.value > 0) {
                            postdata.InputDataSource.push({ ID: id, Value: value.value });
                        } else {
                            postdata.InputDataSource.push({ ID: id, Value: "" });
                        }
                    } else {
                        postdata.InputDataValue.push({ ID: id, Value: value.value });
                    }
                }
            })

            postdata.IssueDescription = $("#IssueDescription").val();
            postdata.Email = $("#Email").val();
            postdata.Mobile = $("#Mobile").val();
            postdata.Priority = $("#Priority").val();
            postdata.IssueType = $("#IssueType").val();
            postdata.ApplicationID = applicationID;
            $.ajax({
                url: "/api/WeChat/AddTickets",
                data: postdata,
                type: "post",
                success: function (data) {
                    if (data == null) {
                        location.href = "../WeChat/HomePage";
                    } else {
                        alert(data);
                    }

                },
                error: function (data) {
                    if (data.statuscode == "401") {
                        $.alert('登录超时');
                    } else {
                        $.alert('保存失败,请重试');
                    }
                }
            })
        }

        $(function () {
            page.$Init();

        });

        var maxInput = 15, $companyName = $("#cp"), $userName = $("#userName"), $mobile = $("#tel"), $email = $("#email"), $issueType = $("#type"), $issueDeacription = $("#details"), $comments = $("#comment"),
            isEmail = /^(\w)+(\.\w+)*@@(\w)+((\.\w{2,3}){1,3})$/,
            //isMobile = /^(1(3|4|5|7|8)\d{9})|((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14})$/;
            isMobile = /(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;

        var page = {
            $Init: function () {
                /*获取Issue Type*/

                /*获取上一次提交ticket的部分数据*/
                //page.$getLastData();

                //page.$checkNowData();

                /*预览图片*/
                //picture.$preview();

                /*提交表单*/
                page.$cancel();

            },

            $cancel: function () {
                $("#cancel").click(function () {
                    location.href = "../WeChat/HomePage";
                });
            },



            /*及时校验数据*/
            $checkNowData: function () {
                $companyName.blur(function () {
                    $(this).removeClass("error");
                    $(this).siblings("span.errorTxt").remove();
                    var companyNameNum = $(this).val().length;
                    if (companyNameNum == 0) {
                        $(this).addClass("error");
                    } else if (companyNameNum > maxInput) {
                        console.log("companyNameNum");
                        $(this).after("<span class='col-xs-8 errorTxt'>输入不得超过15个字！</span>");
                    }
                });

                $userName.blur(function () {
                    $(this).removeClass("error");
                    $(this).siblings("span.errorTxt").remove();
                    var userNameNum = $(this).val().length;
                    if (userNameNum === 0) {
                        $(this).addClass("error");
                    } else if (userNameNum > maxInput) {
                        $(this).after("<span class='col-xs-8 errorTxt'>输入不得超过15个字！</span>");
                    }
                });

                $mobile.blur(function () {
                    $(this).removeClass("error");
                    $(this).siblings("span.errorTxt").remove();
                    if (!$(this).val()) {           //mobile为空
                        $(this).addClass("error");
                    } else if (!isMobile.test($(this).val())) {          //mobile格式错误
                        $(this).after("<span class='col-xs-8 errorTxt'>电话格式不正确！</span>");
                    }
                });

                $email.blur(function () {
                    $(this).removeClass("error");
                    $(this).siblings("span.errorTxt").remove();
                    if ($(this).val() && !isEmail.test($(this).val())) {          //email不为空且格式错误
                        $(this).after("<span class='col-xs-8 errorTxt'>E-mail格式不正确！</span>");
                    }
                });
                $issueType.focus(function () {
                    $(this).siblings("span.errorTxt").remove(); //去掉issueType错误提示
                });
                $issueType.blur(function () {
                    $(this).removeClass("error");
                    if (!$(this).val()) {
                        $(this).after("<span class='col-xs-8 errorTxt'>问题类型不能为空！</span>");
                    }
                });

                $issueDeacription.blur(function () {
                    if (!$(this).val()) {           //issueDeacription为空
                        $(this).addClass("error");
                    }
                });
            },

            /*提交时校验表单数据*/
            $checkSubData: function () {
                $("span.errorTxt").remove();        //去掉错误提示
                if (!$companyName.val()) {
                    $companyName.addClass("error");
                }
                if (!$userName.val()) {
                    $userName.addClass("error");
                }
                if (!$mobile.val()) {
                    $mobile.addClass("error");
                }
                if ($mobile.val() && !isMobile.test($mobile.val())) {             //mobile不为空且格式错误
                    $mobile.after("<span class='col-xs-8 errorTxt'>电话格式不正确！</span>");
                }
                if ($email.val() && !isEmail.test($email.val())) {          //email格式错误
                    $email.after("<span class='col-xs-8 errorTxt'>E-mail格式不正确！</span>");
                }
                if (!$issueType.val()) {
                    $issueType.after("<span class='col-xs-8 errorTxt'>问题类型不能为空！</span>");
                }
                if (!$issueDeacription.val()) {
                    $issueDeacription.addClass("error");
                } else {
                    return true;
                }
                return true;
            },


        };

        //yangyao
        function progressBar(pos) {
            var bar_div = "#bar" + pos;
            //初始化js进度条
            $(bar_div).css("width", "0px");
            //进度条的速度，越小越快
            var speed = 120, bar = bar + pos;

            bar = setInterval(function () {
                nowWidth = parseInt($(bar_div).width());
                //宽度要不能大于进度条的总宽度
                if (nowWidth <= 40) {//49
                    barWidth = (nowWidth + 1) + "px";
                    $(bar_div).css("width", barWidth);
                } else {
                    //进度条读满后，停止
                    clearInterval(bar);
                }
            }, speed);
        }
        //yangyao--


        function compress(_this, pos) {
            //yangyao
            $(_this).next().css("display", "none");
            var div_class = "#progressBar" + pos;
            $(div_class).css("display", "block");
            progressBar(pos);
            //yangyao--

            var imgID = "img" + $(_this).attr("id");
            if ($("#" + imgID).length) {        //重选图片时，去掉上一张图片
                $("#" + imgID).remove();
            };
            var formData = new FormData();
            File = $(_this)[0].files;
            oFile = $(_this)[0].files[0],
                imgSize = oFile.size;
            if (imgSize < 960 * 1280) {
                //formData.append("original", oFile);
                //uploadMob(formData, imgID);
                if (File && oFile) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $(_this).after("<img id='" + imgID + "' class='col-xs-2 imgs' src='" + e.target.result + "'/>");
                        var blob = dataURItoBlob(e.target.result);  // 上一步中的函数
                        var canvas = document.createElement('canvas');
                        var dataURL = canvas.toDataURL('image/jpeg', 1.0);
                        formData.append("file", blob, "image" + imgID + ".png");
                        //yangyao
                        uploadMob(formData, imgID, div_class);
                        //yangyao--
                    }
                    reader.readAsDataURL(oFile);
                }
            } else {
                //将选中图片隐藏在页面
                lrz(_this.files[0], { width: 960, quality: 1.0 }, function (rst) {
                    var show_img = new Image();
                    show_img.src = rst.base64;
                    $(_this).after("<img id='" + imgID + "' class='col-xs-2 imgs' src='" + show_img.src + "'/>");
                    _this.src = show_img.src;
                    var blob = dataURItoBlob(rst.base64);  // 上一步中的函数
                    var canvas = document.createElement('canvas');
                    var dataURL = canvas.toDataURL('image/jpeg', 1.0);
                    formData.append("file", blob, 'image.png');
                    //yangyao
                    uploadMob(formData, imgID, div_class);
                    //yangyao--
                });
            }
        }

        function uploadMob(formData, imgID, div_class) {
            $.ajax({
                url: "/api/WeChat/SaveImageAndReturnImageName",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (info) {
                    if (info == null) {

                        //yangyao
                        $(div_class).css("display", "none");
                        //yangyao--


                        //图片上传成功时，显示图片
                        $("#" + imgID).next().addClass("opa");
                        $("#" + imgID).css("display", "block");
                    } else {
                        alert(info);
                    }
                },
                error: function (info) {
                    alert("图片添加网络故障");
                }
            });
        }

        function dataURItoBlob(base64Data) {
            var byteString;
            if (base64Data.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(base64Data.split(',')[1]);
            else
                byteString = unescape(base64Data.split(',')[1]);
            var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], { type: mimeString });
        }
    </script>
</body>
</html>
